<template>
  <div>
    <Row>
      <iCol span="12">
        <div>
          <List header="localStorage / sessionStorage" border>
            <ListItem>这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护。</ListItem>
            <ListItem>通过 window.localStorage.setItem(key,value) 存储数据</ListItem>
            <ListItem>通过 window.localStorage.getItem(key) 获取数据。</ListItem>
            <ListItem>注意用JSON.parse() / JSON.stringify() 做数据格式转换</ListItem>
            <ListItem>localStorage / sessionStorage可以结合vuex, 实现数据的持久保存,同时使用vuex解决数据和状态混乱问题.</ListItem>
          </List>
        </div>
      </iCol>
      <iCol span="1" style="color:white">1</iCol>
      <iCol span="11">
        <div style="height:24px"></div>
        <iInput v-model="value" />
        <div style="height:24px"></div>
        <Button @click="setDataToLocal" type="primary">将数据存入缓存</Button>
        <div style="height:24px"></div>
        <children></children>
      </iCol>
    </Row>
  </div>
</template>

<script>
import children from "./children";
export default {
  components: {
    children
  },
  methods: {
    setDataToLocal() {
      localStorage.setItem("data", this.value);
    }
  },
  data() {
    return {
      value: "初始化数据"
    };
  }
};
</script>

<style scoped>
ul {
  margin-left: 24px;
  margin-bottom: 24px;
  font-size: 16px;
}
</style>